<template>
  <div id="app">
<!--    <router-link to="/home" tag="button" replace>首页</router-link>-->
<!--&lt;!&ndash;    属性replace则不会入栈出栈 而是replaceState&ndash;&gt;-->
<!--    <router-link to="/about" tag="button" replace>关于</router-link>-->
    <router-link :to="'/user/'+username" tag="button" replace>用户</router-link>
<!--    <router-link :to="{path:'/profile',query:{age:18,height:1.88,name:'mt'}}" tag="button" replace>profile</router-link>-->
    <button @click="profileClick">profile</button>

    <keep-alive exclude="profile">
      <router-view></router-view>
    </keep-alive>


<!--通过代码改变url-->
    <button @click="homeclick">home</button>
    <button @click="aboutclick">about</button>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      username:'Van'
    }
  },
  components: {

  },
  methods:{
    homeclick(){
      // console.log('home');
      // this.$router.push('/home')
      this.$router.replace('/home')
    },
    aboutclick(){
      // console.log('about');
      this.$router.push('/about')
    },
    profileClick(){

      this.$router.push(
          {
            path:'/profile',
            query:{
              age:18,
              height:1.88,
              name:'mt'
            }
          }
      )
    },

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.activate{
  color:darkred;
}
</style>
